<template>
  <div>
    <breadcrumb class="breadcrumb-container"></breadcrumb>
      <el-form :model="addForm" label-position="right" ref="form" :rules="rules" label-width="130px" size="small">
        <el-row>
          <p class="pb10 fz14 bb1 blue"><svg-icon icon-class="account"></svg-icon>基础信息设置</p>
          <el-form-item label="业务员编号" prop="saleman_num">
            <el-input class="w240" placeholder="只能输入数字及字母" disabled v-model="addForm.saleman_num"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="contact_phone">
            <el-input class="w240" v-model="addForm.contact_phone" placeholder="请输入11位手机号码" :maxlength="11"></el-input>
          </el-form-item>
          <el-form-item label="登录账号" prop="phone">
            <el-input class="w240" v-model="addForm.phone" placeholder="请输入11位手机号码" :maxlength="11"></el-input>
          </el-form-item>
          <el-form-item label="登录密码" prop="pwd">
            <el-input class="w240" placeholder="请设置6-16位的密码" :minlength="6" :maxlength="16" v-model="addForm.pwd"></el-input>
          </el-form-item>
          <el-form-item label="真实姓名" prop="name">
            <el-input class="w240" v-model="addForm.name" placeholder="输入真实姓名"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input class="w240 fz12" type="textarea" :autosize="{ minRows: 4}" v-model="addForm.remark"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <p class="pb10 fz14 bb1 blue"><svg-icon icon-class="payMoney"></svg-icon>分佣设置</p>
          <el-form-item label="移动支付返佣比例" prop="mob_rate">
            <el-input class="w240" v-model="addForm.mob_rate" :maxlength="5"></el-input>%
          </el-form-item>
          <el-form-item label="刷卡支付返佣比例" prop="swipe_rate">
            <el-input class="w240" v-model="addForm.swipe_rate" :maxlength="5"></el-input>%
          </el-form-item>
          <el-form-item>
            <span class="err fz12">* 业务员返佣=交易流水 * 对应返佣比例</span>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" @click="handleClickSubmit" :loading="loading">保存资料</el-button>
          </el-form-item>
        </el-row>
      </el-form>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb'
import { validLetterNumber, validatePhone, validateFloatNumber } from '@/utils/validate'
import { salemanEditInit, salemanEditSubmit } from '@/api/saleaman'

export default {
  name: 'edit',
  components: {
    Breadcrumb
  },
  data() {
    const validateSerialNumber = (rules, value, callback) => {
      if (validLetterNumber(value)) {
        callback()
      } else {
        callback(new Error('编号格式错误哟~'))
      }
    }
    const validatePassWord = (rules, value, callback) => {
      if (value.length < 6 || value.indexOf(' ') > 0) {
        callback(new Error('密码输入错误哟~'))
      } else {
        callback()
      }
    }
    const validatePhoneval = (rules, value, callback) => {
      if (!validatePhone(value)) {
        callback(new Error('手机号码输入错误哟~'))
      } else {
        callback()
      }
    }
    const validFloatNum = (reles, value, callback) => {
      if (!validateFloatNumber(value)) {
        callback(new Error('费率输入错误哟~'))
      } else {
        callback()
      }
    }
    return {
      loading: false,
      addForm: {
        saleman_num: '',
        name: '',
        phone: '',
        pwd: '',
        contact_phone: '',
        remark: '',
        mob_rate: '',
        swipe_rate: ''
      },
      rules: {
        saleman_num: [{ required: true, trigger: 'blur', validator: validateSerialNumber }],
        pwd: [{ required: true, trigger: 'blur', validator: validatePassWord }],
        name: [{ required: true, trigger: 'blur', message: '不能为空哦~' }],
        phone: [{ required: true, trigger: 'blur', validator: validatePhoneval }],
        contact_phone: [{ required: true, trigger: 'blur', validator: validatePhoneval }],
        mob_rate: [{ required: true, trigger: 'blur', validator: validFloatNum }],
        swipe_rate: [{ required: true, trigger: 'blur', validator: validFloatNum }]
      }
    }
  },
  methods: {
    handleClickSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true
          salemanEditSubmit(this.addForm).then(response => {
            if (response.data.errorCode === 0) {
              this.loading = false
              this.$message.success('添加成功')
              this.$router.go(-1)
            } else {
              this.loading = false
              this.$message.error(response.data.errorMsg)
            }
          })
        }
      })
    }
  },
  created() {
    salemanEditInit(this.$route.query.id).then(res => {
      if (res.data.errorCode === 0) {
        this.addForm.saleman_num = res.data.result.saleman_num
        this.addForm.name = res.data.result.name
        this.addForm.phone = res.data.result.phone
        this.addForm.pwd = '******'
        this.addForm.contact_phone = res.data.result.contact_phone
        this.addForm.remark = res.data.result.remark
        this.addForm.mob_rate = res.data.result.mob_rate
        this.addForm.swipe_rate = res.data.result.swipe_rate
      } else {
        this.$message.error(res.data.errorMsg)
      }
    })
  }
}
</script>
